<template>
  <view class="viewport">
    <fui-nav-bar
      isOccupy
      isFixed
      background="#0052D9"
      title="选择人员"
      color="#fff"
      @leftClick="leftClick"
    >
      <fui-icon color="#fff" name="arrowleft"></fui-icon>
    </fui-nav-bar>

    <view class="warp">
      <view class="head">
        <view class="ipt"
          >当前班组：{{ currentTeam?.teamName || "未选择班组" }}</view
        >
      </view>
      <view class="portA" v-show="staff.length">
        <view class="ul">
          <view class="li" v-for="v of staff" :key="v.id">
            <view class="title">{{ v.workerName }}</view>
            <fui-icon
              color="#87aaff"
              size="32"
              name="clear-fill"
              @click="removeStaff(v)"
            ></fui-icon>
          </view>
        </view>
        <view class="clear">
          <fui-icon color="#87aaff" size="40" name="clear-fill"></fui-icon>
          <view class="" @click="clear">清除</view>
        </view>
      </view>
      <view class="port">
        <fui-table
          ref="table"
          @selectionChange="onselect"
          selection
          stripe
          :itemList="tableData"
          :header="headerData"
        ></fui-table>
      </view>
      <view class="footer">
        <view class="confirm" @click="handleConfirm">确定</view>
      </view>
      <fui-safe-area></fui-safe-area>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getRepairWorkerList } from "@/pages/api/subpkg_index/dispatching.js";

const leftClick = () => {
  uni.navigateBack();
};

const staff = ref([]);
const table = ref(null);
const tableData = ref([]);
const currentTeam = ref(null);

// 表格列配置
const headerData = ref([
  {
    prop: "workerName",
    label: "姓名",
    width: "180",
  },
  {
    prop: "position",
    label: "职位",
    width: "150",
  },
  {
    prop: "specialty",
    label: "专业",
    width: "150",
  },
  {
    prop: "contactNumber",
    label: "联系电话",
    width: "140",
  },
]);

// 获取维修人员列表
const getWorkerList = async () => {
  try {
    const res = await getRepairWorkerList({
      // teamId: currentTeam.value?.id,
    });
    if (res.code === 200 && res.data.records) {
      tableData.value = res.data.records;
    }
  } catch (error) {
    console.error("获取维修人员列表失败:", error);
    uni.showToast({
      title: "获取数据失败",
      icon: "none",
    });
  }
};

// 勾选表格事件
const onselect = (e) => {
  console.log("选中数据:", e);
  // 如果是数组，说明是多选的结果
  if (Array.isArray(e)) {
    staff.value = e.map((item) => item.item || item).filter(Boolean);
  }
  // 如果是单个对象，处理单次选择
  else if (e && e.item) {
    if (e.is_selected) {
      const existingIndex = staff.value.findIndex(
        (item) => item.id === e.item.id
      );
      if (existingIndex === -1) {
        staff.value.push(e.item);
      }
    } else {
      staff.value = staff.value.filter((item) => item.id !== e.item.id);
    }
  }
};

// 移除单个人员
const removeStaff = (worker) => {
  staff.value = staff.value.filter((item) => item.id !== worker.id);
  // 更新表格选中状态
  if (table.value) {
    const tableData = table.value.getTableData();
    if (tableData && Array.isArray(tableData)) {
      const index = tableData.findIndex((item) => item.id === worker.id);
      if (index !== -1) {
        table.value.unSelect(index);
      }
    }
  }
};

// 点击清除勾选数据
const clear = () => {
  staff.value = [];
  table.value.clearSelection();
};

// 确认选择
const handleConfirm = () => {
  if (staff.value.length === 0) {
    uni.showToast({
      title: "请选择维修人员",
      icon: "none",
    });
    return;
  }

  // 发送选中的人员数据
  uni.$emit("updateStaff", {
    selectedStaff: staff.value,
    type: currentPage.value, // 用于区分是负责人还是其他人员
  });
  uni.navigateBack();
};

// 获取当前页面类型和班组信息
const currentPage = ref("");
onMounted(() => {
  const pages = getCurrentPages();
  const page = pages[pages.length - 1];
  const { type = "", team = null } = page.options || {};

  currentPage.value = type;
  if (team) {
    try {
      currentTeam.value = JSON.parse(decodeURIComponent(team));
    } catch (error) {
      console.error("解析班组数据失败:", error);
    }
  }

  getWorkerList();
});
</script>

<style lang="scss" scoped>
page {
  display: flex;
  height: 100%;
  overflow: hidden;
  flex-direction: column;
}
.viewport {
  flex: 1;
  display: flex;
  // height: 100%;
  overflow: hidden;
  flex-direction: column;
}
.warp {
  flex: 1;
  background-color: #f6f6f6;
  .head {
    margin: 20rpx 0;
    display: flex;
    align-items: center;
    background-color: #fff;
    height: 100rpx;
    padding: 0 50rpx;
    color: #a9a6a2;
    // margin-bottom: 24rpx;
    .ipt {
      flex: 1;
      height: 100rpx;
      display: flex;
      align-items: center;
    }
  }
  .portA {
    margin: 24rpx 0;
    overflow: hidden;
    background-color: #fff;
    .clear {
      float: right;
      display: flex;
      width: 120rpx;
      justify-content: space-around;
      margin-right: 24rpx;
      color: #0052d9;
      font-size: 30rpx;
      height: 50rpx;
      line-height: 50rpx;
      align-items: center;
    }
    .ul {
      background-color: #fff;
      padding: 24rpx;
      display: flex;
      flex-wrap: wrap;
      .li {
        margin: 7rpx 7rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 160rpx;
        border: 1px solid #0052d9;
        color: #0052d9;
        height: 60rpx;
        border-radius: 28rpx;
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 120rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .confirm {
      background-color: #0052d9;
      height: 70rpx;
      border-radius: 10rpx;
      width: 80%;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
}
</style>
